var path = require('path'),
    Webpack = require('webpack'),
    ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

// resolve 函数获取绝对路径
function resolve(dir) {
    return path.join(__dirname, dir);
}

// 运行环境
console.log('运行环境>>', process.env.NODE_ENV);

var config = {
    // 入口：打包编译的入口文件
    entry: {
        main: './src/main.js',
        vendor: ['jquery', 'axios']
    },
    // 出口：
    output: {
        // 打包资源引入路径，相对于 index.html 文件 于资源包的目录, css 可单独配置（开发环境不能配置相对路径，只能以 / 开头）
        publicPath: '/',
        // 编译后的文件名(可以包含路径，name 就是 main)
        filename: 'js/[name].js',
        // 编译后的异步请求的文件名
        chunkFilename: 'js/[name].chunk.js'
    },
    // 模块
    module: {
        // 规则
        rules: [
            // css 文件
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    // 重写 css 文件的 publicPath 设置 背景图、字体文件的引用路径为相对路径
                    publicPath: '../',
                    // 调用的 loader 数组形式调用顺序依然是从后往前
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true // 压缩 css
                            }
                        }
                    ],
                    // 最后调用的 loader
                    fallback: 'style-loader'
                })
            },
            // less
            {
                test: /\.less$/,
                use: ExtractTextWebpackPlugin.extract({
                    // 重写 css 文件的 publicPath 设置 背景图、字体文件的引用路径为相对路径
                    publicPath: '../',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true // 压缩 css
                            }
                        },
                        'less-loader'
                    ],
                    fallback: 'style-loader'
                })
            },
            // js 文件
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            // 图片
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    // 图片名称带有 contenthash 文件指纹打包环境使用
                    name: 'img/[name].[contenthash].[ext]',
                    // 1KB 以内的图片生成 base64 字符串
                    limit: 1024
                }
            },
            // 字体
            {
                test: /\.(woff2?|svg|eot|ttf)\??.*$/,
                loader: 'url-loader',
                exclude: [resolve('src/icons')], // 排除 svg 雪碧图 icons 文件夹
                options: {
                    name: 'font/[name].[contenthash].[ext]',
                    limit: 1024
                }
            },
            // svg图标
            {
                test: /\.svg$/,
                loader: 'svg-sprite-loader',
                options: {
                    symbolId: 'icon-[name]'
                },
                include: [resolve('src/icons')] // 只针对特定目录的 svg 处理
            },
            // Vue
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextWebpackPlugin.extract({
                            // 重写 css 文件的 publicPath 设置 背景图、字体文件的引用路径为相对路径
                            publicPath: '../',
                            use: [
                                {
                                    loader: 'css-loader',
                                    options: {
                                        minimize: true // 压缩 css
                                    }
                                }
                            ],
                            fallback: 'vue-style-loader'
                        }),
                        less: ExtractTextWebpackPlugin.extract({
                            // 重写 css 文件的 publicPath 设置 背景图、字体文件的引用路径为相对路径
                            publicPath: '../',
                            use: [
                                {
                                    loader: 'css-loader',
                                    options: {
                                        minimize: true // 压缩 css
                                    }
                                },
                                'less-loader'
                            ],
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            }
        ] // 加载器
    },
    // 插件
    plugins: [
        // 重命名提取出来的 css 文件名
        new ExtractTextWebpackPlugin({
            filename: 'css/[name].css',
            // 把所有的异步请求的 .vue 文件的 style 也打包到主样式表
            allChunks: true
        }),
        // 定义开发环境变量
        new Webpack.DefinePlugin({
            'process.env': {
                // cross-env 传递的当前开发环境
                NODE_ENV: JSON.stringify(process.env.NODE_ENV),

                // 使用启用 Mock 数据（仅开发环境配置为 true）
                Mock: true,

                // axios 使用的 baseURL 方便接口代理配置
                baseURL: JSON.stringify('/prefix')
            }
        })
    ],
    // 配置路径转换
    resolve: {
        // 引入文件类型省略后缀名称
        extensions: ['.js', '.vue', '.json'],
        // 映射导入路径
        alias: {
            // 要使用 vue 的 <template></template> 需要引入 vue.esm.js
            'vue$': 'vue/dist/vue.esm.js',
            // @ 映射为 项目绝对路径 + src
            '@': resolve('src')
        }
    },
    // 启用 sourcemap（查看文件的源码）禁用时赋值为 false 即可
    devtool: 'source-map',
    // 全局变量声明（变量是通过 script 标签引入的为了正常使用 import 模块化引入需要配置）
    externals: {
        echarts: 'echarts'
    },
    // 进行跨域代理 - 配置
    devServer: {
        contentBase: path.join(__dirname, '/public'), // 开发环境下资源请求映射到 /public 目录下, 可以直接通过 / 访问 public 下的 index.html 入口 html 文件
        proxy: [
            {
                context: ['/prefix/'], // 统一代理
                target: 'http://www.test.com:8888/', // 测试服务器 - 接口文档的测试服务器
                pathRewrite: {
                    '^/prefix': '' // 重写添加的接口请求前缀
                },
                changeOrigin: true,
                secure: false
            }
        ]
    }
};

module.exports = config;